<template>
  <div class="DeviceBinding">
    <a class="download" href="" download>客户端下载</a>
    <!-- 头像 -->
    <div class="DeviceBinding-Avatar">
      <h1><el-avatar shape="square" :size="24" :src="circleUrl" /> 欢迎使用 AI Storage</h1>
    </div>
    <div class="deviceList" @click="idFromDialog = true">
      <el-avatar shape="square" :size="50" :src="avatarUrl" />
      <div class="content">
        <p>连接Pocket</p>
        <p>您可以有线网络或Wi-Fi将Pocket连接至互联网</p>
      </div>
      <div class="icon-right">
      </div>

    </div>
    <!-- id表单弹窗 -->
    <el-dialog v-model="idFromDialog" align-center style="width: 420px;border-radius: 8px;height: 240px;">
      <div class="networking">
        <div class="networking-title">通过互联网连接Pocket</div>
        <el-form ref="networkingRef" :rules="networkingRules" :label-position="'top'" :model="networkingForm"
          label-width="auto" style="max-width: 600px;margin-top: 25px;">
          <el-form-item label="设备ID" prop="id">
            <el-input v-model="networkingForm.id" placeholder="设备ID" />
          </el-form-item>
          <el-form-item>
            <div class="networking-button">
              <el-button @click="idFromDialog = false" style="width: 68px;">取消</el-button>

              <el-button @click="networkingSubmit(networkingRef)" :disabled="buttonDisabled" style="width: 68px;"
                type="primary">{{
                  networkingbutton }}</el-button>
            </div>
          </el-form-item>
        </el-form>

      </div>
    </el-dialog>
    <!-- 设备没连接弹窗 -->
    <el-dialog v-model="NotNetDialog" align-center style="width: 470px;border-radius: 8px;height: 270px;">

      <div class="NotNetDialog">
        <p>Pocket设备不在线</p>
        <p>可通过以下两种方式之一，<span style="color: #315EFB;">将Pocket接入互联网：</span></p>
        <p style="margin-bottom: 10px;">&nbsp;1. 首次使用或更换网络环境时，请先为Pocket配置Wi-Fi网络，配置前，请使用USB-C或网线将Pocket连接至本电脑 </p>
        <p>&nbsp;2. 使用网线将Pocket接入互联网</p>
        <el-button type="primary" style="width: 127px;height: 36px; float:right;"
          @click="NotNetClick">配置Wi-Fi网络</el-button>
      </div>

    </el-dialog>
    <!-- 配置设备wifi弹窗 -->
    <el-dialog v-model="setUpWIFIDialog" align-center style="width: 533px;border-radius: 8px;height: 457px;">

      <div class="setUpWIFIDialog">
        <p>为Pocket配置Wi-Fi网络</p>
        <p>请确保Pocket已通过USB-C连接线（或网线），连接至这台电脑。</p>
        <p>为能使电脑访问Pocket，需要您手动请进行以下操作</p>
        <p>配置电脑网络</p>
        <p>1. 首次使用或更换网络环境时，请先为Storage配置Wi-Fi网络，配置前，请使用网线直连Storage设备</p>
        <p>2. 请使用网线将Storage接入互联，且将本地网络设置为192.168.150.2/255的网段</p>
        <p>请在完成以上操作后，再点击‘下一步’按钮。</p>
        <!-- <p>也可以通过<a href="" download>客户端</a>自动完成配置</p> -->
        <div class="button"><el-button style="width: 90px;height: 36px;"
            @click="setUpWIFIDialog = false">取消</el-button><el-button style="width: 126px;height: 36px;"
            @click="nextButton" :disabled="buttonDisabled" type="primary">{{ nextbuttonText }}</el-button></div>
      </div>
    </el-dialog>
    <!-- 下载客户端弹窗 -->
    <el-dialog v-model="downloadDialog" align-center style="width: 428px;border-radius: 8px;height: 180px;">
      <div class="downloadDialog">
        <p>下载客户端</p>
        <p>下载客户端无需手动配置，点击下方按钮即可下载</p>
        <div class="button">
          <el-button style="width: 90px;height: 36px;" @click="allocationWIFI">取消</el-button>
          <el-button type="primary" style="width: 90px;height: 36px;"><a style="color:white" href="" download>下载
            </a></el-button>
        </div>
      </div>
    </el-dialog>
    <a @click="setUpWIFIDialog = true" class="usb-c">通过USB-C连接</a>
  </div>
</template>
<script setup>
import { ref, nextTick, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter,useRoute } from 'vue-router';
import { storeToRefs } from 'pinia'
import {login, wifiInfo,testNetwork} from "@/api/index.js";
import { usePortStore } from '@/stores/index'
const router = useRouter()
const route = useRoute()
// import Device from './components/Device.vue'
// import Login from './components/Login.vue'
// import { } from '@/api';
//欢迎头像
const circleUrl = ref('http://igrsbj.oss-cn-beijing.aliyuncs.com/jar/CloudBoard_xz/icons/storageTitle.svg')
//连接选项头像
const avatarUrl = ref('http://igrsbj.oss-cn-beijing.aliyuncs.com/jar/CloudBoard_xz/icons/link.svg')
//输入id表单弹窗
const idFromDialog = ref(false)
//不在线弹窗
const NotNetDialog = ref(false)
//配置设备wifi弹窗
const setUpWIFIDialog = ref(false)
//下载弹窗
const downloadDialog = ref(false)
//下一步按钮是否禁用
const buttonDisabled = ref(false)
//id表单内容
const networkingForm = ref({ id: '' })
const { setPort,setUrl } = usePortStore()
const { port } = storeToRefs(usePortStore())
const isNetwork = ref(false)
//id校验规则
const idValidator = (rule, value, callback) => {
  buttonDisabled.value = true
  networkingbutton.value = '验证中...'
  login({deviceId: networkingForm.value.id}).then(response => {
    console.log(response.data)
    setTimeout(() => {
      if (response.code != 0) {
        callback(new Error('设备ID错误请重新输入'))
      }else {
        buttonDisabled.value = false
        if(response.data.wireless !== null && response.data.wireless.length>0){
          isNetwork.value = true
          console.log(response.data.wireless[0])
          try {
            testNetwork(response.data.wireless[0]).then(res =>{
              console.log(res)
              if (res.code == 200) {
                // window.location = "http://" + response.data.wireless[0] + ":88/login?host="+response.data.wireless[0] + "&pocket="+networkingForm.value.id
              }
              setPort({...response.data, time: new Date().getTime()})
            })

          } catch (e) {
          }
        }else {
          NotNetDialog.value = true
          isNetwork.value = false
        }
        setPort({...response.data, time: new Date().getTime()})
        callback()
      }
    }, 1000)
  })


}
const networkingRef = ref(null)
//通过设备id连接 点击确定时为验证中...
const networkingbutton = ref('确定')
const nextbuttonText = ref('下一步')
//设备id校验规则
const networkingRules = ref({
  id: [
    {
      required: true,
      message: '请输入Pocket设备ID',
      trigger: 'blur'
    },
    {
      validator: idValidator,
      trigger: 'submit'
    },
  ]
})
//不在线弹窗配置按钮
const NotNetClick = () => {
  downloadDialog.value = true
  NotNetDialog.value = false
}
//id提交
const networkingSubmit = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      idFromDialog.value = false
      console.log('提交')
      if(isNetwork.value) {
        router.push('/login')
      }
    }
    networkingbutton.value = '确定'
  })
}
//下一步
const nextButton = () => {
  buttonDisabled.value = true
  nextbuttonText.value = '验证中...'
  setTimeout(() => {

    buttonDisabled.value = false
    nextbuttonText.value = '已完成配置'
    //登录
    window.location = "http://192.168.150.1:88/allocation"
    // router.push('/allocation')
  }, 1000)
}
//配置设备WIFI
const allocationWIFI = () => {
  downloadDialog.value = false
  setUpWIFIDialog.value = true
}

</script>
<style lang="scss" scoped>
.DeviceBinding {
  display: flex;
  flex-direction: column;
  align-items: center;

  .DeviceBinding-Avatar {
    width: 100%;
    margin-top: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    h1 {
      font-size: 24px;
      font-style: normal;
      font-weight: 600;
      margin-top: 20px;
    }
  }

  .download {
    position: absolute;
    right: 26px;
    top: 26px;

  }

  .deviceList {
    position: relative;
    width: 496px;
    height: 101px;
    margin-top: 80px;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #B2B2B2;
    background: #FFF;
    display: flex;

    .content {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 30px;

      p {
        &:nth-child(1) {
          color: #000;
          font-weight: 600;
        }

        &:nth-child(2) {
          color: #0F172A;
          font-size: 14px;
        }
      }
    }

    .icon-right {
      position: absolute;
      right: 22px;
      bottom: 22px;
      width: 16px;
      height: 16px;
      background: url('@/assets/image/Right-small.svg') no-repeat center;
    }
  }

  .networking {

    padding: 15px;

    .networking-title {
      color: #111;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .networking-button {
      display: flex;
      width: 100%;
      justify-content: end;
      margin-top: 5px;
    }

  }

  .NotNetDialog {
    padding: 0 20px;

    p {
      color: #111;
      font-size: 14px;
      margin-bottom: 20px;

      text-indent: -1.5em;
      padding-left: 1.5em;
      /* 设置首行缩进为2个em单位 */

      &:nth-child(1) {
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
      }

      &:nth-child(3),
      &:nth-child(4) {
        color: #404040;


      }

    }
  }

  .setUpWIFIDialog {
    padding: 10px;

    p {
      margin-bottom: 24px;

      &:nth-child(1) {
        color: #000;
        font-weight: 600;
        margin-bottom: 8px;
      }

      &:nth-child(2),
      &:nth-child(3) {
        color: #404040;
        font-size: 14px;
      }

      &:nth-child(4) {
        color: #1F2328;
        font-size: 14px;
        font-weight: 600;
      }

      &:nth-child(5),
      &:nth-child(7),
      &:nth-child(6) {
        color: #818391;
        font-size: 14px;
      }

      &:nth-child(8),
      &:nth-child(9) {
        color: #818391;
        font-size: 14px;
        margin-bottom: 0;
      }

    }

    .button {
      display: flex;
      justify-content: end;
      margin-top: 20px;
    }
  }

  .downloadDialog {
    padding: 10px;

    p {
      &:nth-child(1) {
        color: #000;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
      }

    }

    .button {
      width: 100%;
      margin-top: 35px;
      display: flex;
      justify-content: end;
      align-items: center;
    }
  }

  .usb-c {
    font-size: 12px;
    position: absolute;
    bottom: 20px;
    cursor: pointer;
  }
}
</style>
